<template>
    <div>
        <div class="back">
            <span class="iconfont icon-xiangzuojiantou zjt" @click="$router.go(-1)"></span><span class="navTitle">评论(20)</span>
        </div>
        <div class="remarkListsBox" v-for="item in getrl" :key="item.commentId">
            <van-skeleton title avatar :loading="loading">
                <div class="remarkListsContent">
                    <div class="remarkListsImg">
                        <img :src="item.user.avatarUrl" alt/>
                    </div>
                    <div class="remarkListsText">
                        <h3>{{item.user.nickname}}</h3>
                        <span>{{item.timeStr}}</span>
                        <p>{{item.content}}</p>
                        <div class="dzBtn">
                            <span>{{item.likedCount}}</span>
                            <span class="iconfont icon-dianzan" v-show="item.liked==false" @click="likeCheck(item.commentId,item.liked)"></span>
                            <span class="iconfont icon-dianzan1 dz1" v-show="item.liked==true" @click="likeCheck(item.commentId,item.liked)"></span>
                        </div>
                    </div>
                </div>
            </van-skeleton>
        </div>
        <div class="comment">
            <div class="commentBox">
                <div class="input">
                    <input type="text" v-model="value" @keydown.enter="send" placeholder="发表评论">
                </div>
                <div class="commentBtn" @click="send">发送</div>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Skeleton } from 'vant';
import {getCommentMusic} from "../../api/remarkLists" 
import {getCommentLike,getComment} from '../../api/MV'
import {getCommentPlaylist} from "../../api/recommend";

Vue.use(Skeleton);
export default {
  data() {
    return {
      loading: true,
      getID:null,
      getrl:[],
      t:null,
      value:null,
    };
  },
  methods:{
        // 歌单评论接口
        getCommentPlaylistFun(){
            getCommentPlaylist({id:this.getGDID}).then(data=>{
            console.log('zxc',data)
            this.getrl = data.comments
            })
        },
        // 发送评论
        send(){
            this.getCommentFun();
            this.value = '';
        },
        // 发送评论接口
        getCommentFun(){
            getComment({t:1,type:0,id:this.getID,content:this.value}).then(data=>{
                console.log(data)
            })
        },
        // 点赞评论
        likeCheck(id,liked){
            console.log(id)
            this.t = liked==true?0:1;
            // this.check = !this.check;
            console.log(this.t)
            this.getCommentLikeFun(id)
        },
        // 评论点赞接口
        getCommentLikeFun(id){
            getCommentLike({id:this.getID,cid:id,t:this.t,type:0}).then(data=>{
                console.log(data)
            })
        },
        // 获取评论接口
        getCommentMusicFun(){
            getCommentMusic({id:this.getID,limit:30}).then(data=>{
                this.getrl = data.comments
                console.log('获取评论接口',this.getrl)
            })
        }
  },
  mounted() {
    this.loading = false;
  },
  created(){
    //   console.log(this.$route.params)
      this.getID = this.$route.params.id
      this.getGDID = this.$route.params.gdid
      if(this.getID != null){
        this.getCommentMusicFun();
      }
      if(this.getGDID != null){
        this.getCommentPlaylistFun();
      }
      console.log(this.getGDID)
  }
};
</script>

<style lang="less">
.main{
    padding-bottom: 52px;
}
.back{
    line-height: 50px;
    background-color: #d44439;
    .zjt{
        padding-left: 8px;
        color: white;
    }
    .navTitle{
        font-weight: bold;
        margin-left: 39%;
        color: white;
    }
}
.remarkListsBox{
    margin-top: 10px;
    padding: 10px;
    .remarkListsContent{
        display: flex;
        .remarkListsImg{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            overflow: hidden;
            flex:2;
            margin-right: 10px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .remarkListsText{
            flex: 9;
            position: relative;
            h3{
                font-weight: bold;
            }
            span{
                color: #ccc;
                font-size: 12px;
            }
            p{
                font-size: 14px;
                color: #333;
            }
            .dzBtn{
                position: absolute;
                top: 0px;
                right: 10px;
                .dz1{
                    color: red;
                }
            }
        }
    }
}
.comment{
    position:fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    .commentBox{
        display: flex;
        padding: 12px 10px;
        background-color: white;
        justify-content: space-between;
        .input{
            width: 85%;
            input{
                width: 100%;
                height: 100%;
                border: none;
                font-size: 14px;
                padding: 0px 5px;
            }
        }
        .commentBtn{
            margin-right: 5px;
            color:#ccc  ;
            font-size: 14px;
            padding: 5px 10px;
        }
    }
}
</style>